<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="餐饮管理系统">
    <meta name="keywords" content="HTML,CSS,餐饮,用户">
    <meta name="author" content="Marinda">
    <!-- Link Swiper's CSS -->

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>在线点餐</title>
    <link rel="stylesheet" href="public/css/meal.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="public/css/swiper.min.css">
    <!--icon 矢量图标 -->
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2813781_gsa66hcs0vw.css?spm=a313x.7781069.1998910419.81&file=font_2813781_gsa66hcs0vw.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <header class="col-xs-12 col-lg-12 col-sm-12 col-md-12">
            <div class="logo_xs_view col-xs-6 col-lg-6 col-sm-3 col-md-6">
                <div class="logo col-xs-12 col-sm-10 col-md-10 col-lg-12">
                    <img src="public/image/logo.png" alt="餐饮系统" class="col-xs-4 col-sm-4 col-md-6 col-lg-2" width="50px"
                        height="50px">
                    <h1 style="font-size: 20px;" class="col-lg-3 col-xs-12 col-sm-12 col-md-12">在线点餐</h1>
                </div>
            </div>
            <div class="nav col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <nav class="col-xs-7 col-sm-6 col-lg-12 col-md-6" style="float: right;">
                    <ul>
                        <li class="col-xs-10 col-sm-12 col-lg-4 col-md-3"><a href="#">
                            <span class="iconfont icon-gouwuche" style="font-size: 17px;color: red;margin-right: 10px;"></span>(*)</a></li>
                        <li class="col-xs-10 col-sm-10 col-lg-4 col-md-3"><a href="#">
                            <span class="iconfont icon-ren" style="font-size: 17px;color: red;margin-right: 5px;"></span></a></li>
                            <li class="col-xs-10 col-sm-10 col-lg-3 col-md-3" style="border-right: none;"><a href="#">
                                <span class="iconfont icon-caidan" style="font-size: 17px;color: red;margin-right: 5px;"></span></a></li>
                    </ul>
                </nav>
            </div>
            <nav class="meal_show_nav col-xs-6 col-sm-9 col-lg-6 col-md-6">
                <ul>
                    <li class="col-xs-10 col-sm-3 col-lg-4 col-md-3"><a href="#">
                        <span class="iconfont icon-gouwuche" style="font-size: 17px;color: red;margin-right: 10px;"></span> 购物车</a></li>
                    <li class="col-xs-10 col-sm-3 col-lg-4 col-md-4"><a href="#">
                        <span class="iconfont icon-ren" style="font-size: 17px;color: red;margin-right: 5px;"></span> 个人中心</a></li>
                        <li class="col-xs-10 col-sm-3 col-lg-3 col-md-4" style="border-right: none;"><a href="#">
                            <span class="iconfont icon-caidan" style="font-size: 17px;color: red;margin-right: 5px;"></span> 回到首页</a></li>
                </ul>
            </nav>
        </header>
        <main class="col-xs-12 col-lg-12 col-sm-12 col-md-12">
            <h2 style="font-size: 20px;" class="col-lg-3 col-xs-6 col-sm-6 col-md-5">餐品类型</h2>
            <!-- 餐品类型 -->
            <div class="meal_type_info col-xs-12 col-md-12 col-sm-12 col-lg-12">
                <ul>
                    <li class="col-xs-7 col-md-6 col-sm-6 col-lg-2"
                        style="border-right: 1px solid #ccc;border-left: 1px solid #ccc;"><span
                            class="iconfont icon-tuijian" style="font-size: 17px;color: blue;"></span> 餐品时段</li>
                    <li class="col-xs-6 col-md-6 col-sm-6 col-lg-1"><span class="iconfont icon-zaocan"
                            style="font-size: 17px;color: orange;"></span> 早餐</li>
                    <li class="col-xs-6 col-md-6 col-sm-6 col-lg-1"><span class="iconfont icon-wucan"
                            style="font-size: 17px;color: red;"></span> 中餐</li>
                    <li style="border-right: none;" class="col-xs-6 col-md-6 col-sm-6 col-lg-1"><span
                            class="iconfont icon-wancan" style="font-size: 17px;color: green;"></span> 晚餐</li>
                </ul>
            </div>
            <!-- 餐品种类 -->
            <div class="meal_type_items col-xs-12 col-md-12 col-sm-12 col-lg-12">
                <ul>
                    <li class="col-xs-7 col-md-6 col-sm-6 col-lg-2"
                        style="border-right: 1px solid #ccc;border-left: 1px solid #ccc;"><span
                            class="iconfont icon-tuijian" style="font-size: 17px;color: blue;"></span> 餐品种类</li>
                    <li class="col-xs-12 col-md-12 col-sm-12 col-lg-2"><input type="radio" name="meal_type"
                            class="col-lg-1" /><a href="#"><span class="iconfont icon-qingcai"
                                style="font-size: 17px;color: green;"></span> 蔬菜</a></li>
                    <li class="col-xs-12 col-md-12 col-sm-12 col-lg-2"><input type="radio" name="meal_type" /><a
                            href="#"><span class="iconfont icon-alishangchuan-"
                                style="font-size: 17px;color: blue;"></span>水果</a></li>
                    <li class="col-xs-12 col-md-12 col-sm-12 col-lg-2"><input type="radio" name="meal_type" /><a
                            href="#"><span class="iconfont icon-rou" style="font-size: 17px;color: red;"></span> 荤菜</a>
                    </li>
                    <li style="border-right: none;" class="col-xs-12 col-md-12 col-sm-12 col-lg-2"><input type="radio"
                            name="meal_type" /><a href="#"><span class="iconfont icon-haixian"
                                style="font-size: 17px;color: red;"></span> 海鲜</a></li>
                </ul>
            </div>
            <!-- 餐品价格 -->
            <div class="meal_price_items col-xs-12 col-md-12 col-sm-12 col-lg-12">
                <ul>
                    <li class="col-xs-7 col-md-6 col-sm-6 col-lg-2"
                        style="border-right: 1px solid #ccc;border-left: 1px solid #ccc;"><span
                            class="iconfont icon-jiage" style="font-size: 17px;color: blue;"></span> 餐品价格</li>
                    <li class="col-xs-12 col-md-12 col-sm-12 col-lg-2">&nbsp;<input type="checkbox" name="meal_price"
                            class="col-lg-1" /><a href="#"><span class="iconfont icon-jiage"
                                style="font-size: 17px;color: red;"></span> 50元</a></li>
                    <li class="col-xs-12 col-md-12 col-sm-12 col-lg-2">&nbsp;<input type="checkbox"
                            name="meal_price" />&nbsp;<a href="#"><span class="iconfont icon-jiage"
                                style="font-size: 17px;color: red;"></span> 100元</a></li>
                    <li class="col-xs-12 col-md-12 col-sm-12 col-lg-2">&nbsp;<input type="checkbox"
                            name="meal_price" />&nbsp;<a href="#"><span class="iconfont icon-jiage"
                                style="font-size: 17px;color: red;"></span> 300元</a></li>
                    <li style="border-right: none;" class="col-xs-12 col-md-12 col-sm-12 col-lg-2">&nbsp;<input
                            type="checkbox" name="meal_price" />&nbsp;<a href="#"><span class="iconfont icon-jiage"
                                style="font-size: 17px;color: red;"></span> 500及以上</a></li>
                </ul>
            </div>
            <div class="meal_show col-xs-12 col-md-12 col-lg-12 col-sm-12">
                <div class="meal_show_content col-xs-6 col-md-6 col-sm-6 col-lg-3">
                    <img src="public/image/meal_11.jpg" alt="meal" class="col-xs-12 col-md-9 col-sm-6 col-lg-12" height="100px"
                        style="margin-bottom: 10px;">
                    <p class="col-xs-12 col-sm-5 col-lg-7 col-md-12">乳酸菌面包</p>
                    <p class="col-xs-12 col-sm-5 col-lg-12 col-md-8" style="text-align: right;"><span
                            class="iconfont icon-jiage" style="font-size: 17px;color: red;"> 13.50</p>
                            <div style="clear: both;"></div>
                    <div class="addShopCardButton col-xs-12 col-lg-11 col-md-8 col-sm-5">
                        <p class="col-xs-12 col-lg-12 col-md-12 col-sm-12"><span class="iconfont icon-gouwuche"
                                style="font-size: 17px;color: red;margin-right: 10px;"></span>添加购物车</p>
                    </div>
                </div>
                <div class="meal_show_content col-xs-6 col-md-6 col-sm-6 col-lg-3">
                    <img src="public/image/meal_11.jpg" alt="meal" class="col-xs-12 col-md-9 col-sm-6 col-lg-12" height="100px"
                        style="margin-bottom: 10px;">
                    <p class="col-xs-12 col-sm-5 col-lg-7 col-md-12">乳酸菌面包</p>
                    <p class="col-xs-12 col-sm-5 col-lg-12 col-md-8" style="text-align: right;"><span
                            class="iconfont icon-jiage" style="font-size: 17px;color: red;"> 13.50</p>
                            <div style="clear: both;"></div>
                    <div class="addShopCardButton col-xs-12 col-lg-11 col-md-8 col-sm-5">
                        <p class="col-xs-12 col-lg-12 col-md-12 col-sm-12"><span class="iconfont icon-gouwuche"
                                style="font-size: 17px;color: red;margin-right: 10px;"></span>添加购物车</p>
                    </div>
                </div>
                <div class="meal_show_content col-xs-6 col-md-6 col-sm-6 col-lg-3">
                    <img src="public/image/meal_11.jpg" alt="meal" class="col-xs-12 col-md-9 col-sm-6 col-lg-12" height="100px"
                        style="margin-bottom: 10px;">
                    <p class="col-xs-12 col-sm-5 col-lg-7 col-md-12">乳酸菌面包</p>
                    <p class="col-xs-12 col-sm-5 col-lg-12 col-md-8" style="text-align: right;"><span
                            class="iconfont icon-jiage" style="font-size: 17px;color: red;"> 13.50</p>
                            <div style="clear: both;"></div>
                    <div class="addShopCardButton col-xs-12 col-lg-11 col-md-8 col-sm-5">
                        <p class="col-xs-12 col-lg-12 col-md-12 col-sm-12"><span class="iconfont icon-gouwuche"
                                style="font-size: 17px;color: red;margin-right: 10px;"></span>添加购物车</p>
                    </div>
                </div>
                <div class="meal_show_content col-xs-6 col-md-6 col-sm-6 col-lg-3">
                    <img src="public/image/meal_11.jpg" alt="meal" class="col-xs-12 col-md-9 col-sm-6 col-lg-12" height="100px"
                        style="margin-bottom: 10px;">
                    <p class="col-xs-12 col-sm-5 col-lg-7 col-md-12">乳酸菌面包</p>
                    <p class="col-xs-12 col-sm-5 col-lg-12 col-md-8" style="text-align: right;"><span
                            class="iconfont icon-jiage" style="font-size: 17px;color: red;"> 13.50</p>
                            <div style="clear: both;"></div>
                    <div class="addShopCardButton col-xs-12 col-lg-11 col-md-8 col-sm-5">
                        <p class="col-xs-12 col-lg-12 col-md-12 col-sm-12"><span class="iconfont icon-gouwuche"
                                style="font-size: 17px;color: red;margin-right: 10px;"></span>添加购物车</p>
                    </div>
                </div>
                <div class="meal_show_content col-xs-6 col-md-6 col-sm-6 col-lg-3">
                    <img src="public/image/meal_11.jpg" alt="meal" class="col-xs-12 col-md-9 col-sm-6 col-lg-12" height="100px"
                        style="margin-bottom: 10px;">
                    <p class="col-xs-12 col-sm-5 col-lg-7 col-md-12">乳酸菌面包</p>
                    <p class="col-xs-12 col-sm-5 col-lg-12 col-md-8" style="text-align: right;"><span
                            class="iconfont icon-jiage" style="font-size: 17px;color: red;"> 13.50</p>
                            <div style="clear: both;"></div>
                    <div class="addShopCardButton col-xs-12 col-lg-11 col-md-8 col-sm-5">
                        <p class="col-xs-12 col-lg-12 col-md-12 col-sm-12"><span class="iconfont icon-gouwuche"
                                style="font-size: 17px;color: red;margin-right: 10px;"></span>添加购物车</p>
                    </div>
                </div>
                <div class="meal_show_content col-xs-6 col-md-6 col-sm-6 col-lg-3">
                    <img src="public/image/meal_11.jpg" alt="meal" class="col-xs-12 col-md-9 col-sm-6 col-lg-12" height="100px"
                        style="margin-bottom: 10px;">
                    <p class="col-xs-12 col-sm-5 col-lg-7 col-md-12">乳酸菌面包</p>
                    <p class="col-xs-12 col-sm-5 col-lg-12 col-md-8" style="text-align: right;"><span
                            class="iconfont icon-jiage" style="font-size: 17px;color: red;"> 13.50</p>
                            <div style="clear: both;"></div>
                    <div class="addShopCardButton col-xs-12 col-lg-11 col-md-8 col-sm-5">
                        <p class="col-xs-12 col-lg-12 col-md-12 col-sm-12"><span class="iconfont icon-gouwuche"
                                style="font-size: 17px;color: red;margin-right: 10px;"></span>添加购物车</p>
                    </div>
                </div>
                <div class="meal_show_content col-xs-6 col-md-6 col-sm-6 col-lg-3">
                    <img src="public/image/meal_11.jpg" alt="meal" class="col-xs-12 col-md-9 col-sm-6 col-lg-12" height="100px"
                        style="margin-bottom: 10px;">
                    <p class="col-xs-12 col-sm-5 col-lg-7 col-md-12">乳酸菌面包</p>
                    <p class="col-xs-12 col-sm-5 col-lg-12 col-md-8" style="text-align: right;"><span
                            class="iconfont icon-jiage" style="font-size: 17px;color: red;"> 13.50</p>
                            <div style="clear: both;"></div>
                    <div class="addShopCardButton col-xs-12 col-lg-11 col-md-8 col-sm-5">
                        <p class="col-xs-12 col-lg-12 col-md-12 col-sm-12"><span class="iconfont icon-gouwuche"
                                style="font-size: 17px;color: red;margin-right: 10px;"></span>添加购物车</p>
                    </div>
                </div>
                <div class="meal_show_content col-xs-6 col-md-6 col-sm-6 col-lg-3">
                    <img src="public/image/meal_11.jpg" alt="meal" class="col-xs-12 col-md-9 col-sm-6 col-lg-12" height="100px"
                        style="margin-bottom: 10px;">
                    <p class="col-xs-12 col-sm-5 col-lg-7 col-md-12">乳酸菌面包</p>
                    <p class="col-xs-12 col-sm-5 col-lg-12 col-md-8" style="text-align: right;"><span
                            class="iconfont icon-jiage" style="font-size: 17px;color: red;"> 13.50</p>
                            <div style="clear: both;"></div>
                    <div class="addShopCardButton col-xs-12 col-lg-11 col-md-8 col-sm-5">
                        <p class="col-xs-12 col-lg-12 col-md-12 col-sm-12"><span class="iconfont icon-gouwuche"
                                style="font-size: 17px;color: red;margin-right: 10px;"></span>添加购物车</p>
                    </div>
                </div>
            </div>
            <div style="clear: both;"></div>
        
            <div class="meal_count col-xs-12 col-md-12 col-sm-12 col-lg-12">
                <div style="width: 300px;text-align: center;">
                    <ul>
                        <li class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><a href="#">1</a></li>
                        <li class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><a href="#">2</a></li>
                        <li class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><a href="#">3</a></li>
                        <li class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><a href="#">首页</a></li>
                        <li class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><a href="#">末页</a></li>
                    </ul>
                </div>
            </div>
        </main>
        <footer>
            
        </footer>
    </div>
</body>
<script>
    $(document).ready(function()
    {
        var nav =  $(".nav").offset().top;
        $(window).scroll(function () {
                var offsetTop = nav + $(window).scrollTop() + "px";
                $(".nav").animate({ top: offsetTop }, { duration: 10, queue: false });
            });
    })
</script>

</html>